<template>
	<view class="container">
		<view class="header">
			<text>您好</text>
			<text>欢迎来到金华佗中医</text>
		</view>
		<view>
			<input v-model="phone_number" placeholder-class="phClass" maxlength="14" class="phone_number" type="number"
			 placeholder="请输入手机号码" />
		</view>
		<view class="verification_code_father">
			<input v-model="verification_code" placeholder-class="phClass" maxlength="6" class="verification_code" type="number" value="123"
			 placeholder="请输入验证码" />
			<text @click="is_click && get_code()" class="get_dode">{{verify}}</text>
		</view>
		<view class="agree">
			<radio @click="change" :checked="is_true" />
			已阅读并同意<a href="">❬❬用户服务协议❭❭</a>和<a href="">❬❬隐私政策❭❭</a>
		</view>
		<view @click="login" class="btn">登录</view>
		<view class="other_login">其他方式</view>
		<view class="icon-weixin">
			<button @getuserinfo="getUserInfo" bind open-type="getUserInfo" withCredentials="true">获取用户信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				is_true: false,
				phone_number: "",
				//用户输入得验证码
				// verification_code: null,
				verification_code: "",
				verify: "获取验证码",
				//验证倒计时
				count_down: 60,
				//存储接收验证码
				verify_code: 123,
				//获取验证码是否禁用
				is_click: true,
				status:""
			}
		},
		onLoad(){
			
		},
		methods:{
			change(){
				this.is_true = !this.is_true
			},
			//验证码
			get_code(){
				var phone_reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phone_reg.test(this.phone_number)) {
					uni.showToast({
						"title": "手机号错误，请重新填写",
						"icon": "none"
					});
					return;
				}
				let that = this;
				that.is_click = false;
				var timer = setInterval(function() {
					that.verify = that.count_down-- + " S";
					if (that.count_down < -1) {
						clearInterval(timer);
						that.verify = "获取验证码";
						that.count_down = 60;
						that.is_click = true;
						return;
					}
				}, 1000)
				uni.request({
					url: '',
					method: 'GET',
					data: {},
					success: res => {
						that.verify_code = res;
					},
				});
			},
			//登录
			login(){
				var that = this;
				var phone_reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phone_reg.test(that.phone_number)) {
					uni.showToast({
						"title": "手机号不正确，请重新输入",
						"icon": "none"
					});
					return;
				};
				if (that.is_true == false) {
					uni.showToast({
						"title": "请同意用户协议",
						"icon": "none"
					});
					return;
				}
				if (that.verification_code == that.verify_code) {
					// wx.switchTab({
					// 	url: '/pages/account/account',
					// 	fail(res) {
					// 		console.log(res)
					// 	}
					// })
				} else {
					uni.showToast({
						"title": "验证码不正确",
						"icon": "none"
					});
					return;
				}
			},
			//微信
			getUserInfo(){
				wx.authorize({
					scope:"scope.userInfo",
					complete(e){
						uni.getSetting({
							success (res) {
								if(res.authSetting["scope.userInfo"]){
									uni.getUserInfo({
										success(res){
											let nickname=res.userInfo.nickName;
											let gender=res.userInfo.gender;
											let avatar=res.userInfo.avatarUrl;
											let city=res.userInfo.city;
											wx.showLoading({
												title: '登录中...'
											});
											wx.reLaunch({
												"url":"../../pages/my/index?nickname="+nickname+"&gender="+gender+"&avatar="+avatar+"&city="+city
											})
										}
									});
								}else{
									wx.showToast({
										"title":"登录失败，请重新授权",
										"icon":"none"
									})
								}
							}
						})
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/5df1de8e-6b43-4399-b34d-8934c1bc4feb.png');
		background-size: cover;
		background-position: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 68rpx;
		.header{
			display: flex;
			flex-direction: column;
			font-size: 48rpx;
			color: #5e4111;
			font-weight: 700;
			margin-top: 100rpx;
		}
		.phone_number{
			width: 100%;
			height: 96rpx;
			margin-top: 50rpx;
			background-color: #e6e2da;
			padding-left: 30rpx;
			border-radius: 12rpx;
			box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
			box-sizing: border-box;
		}
		.verification_code_father{
			position: relative;
			.verification_code{
				width: 100%;
				height: 96rpx;
				margin-top: 50rpx;
				background-color: #e6e2da;
				padding-left: 30rpx;
				border-radius: 12rpx;
				box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
				box-sizing: border-box;
			}
			.get_dode{
				position: absolute;
				right: 38rpx;
				bottom: 23rpx;
				color: #bd9a5e;
				font-size: 29rpx;
				padding-left: 15rpx;
				height: 44rpx;
				width: 147rpx;
				z-index: 2;
				text-align: center;
			}
		}
		.agree{
			width: 100%;
			display: flex;
			color: #58544d;
			margin: 48rpx 0;
			font-size: 28rpx;
			align-items: center;
			radio{
				transform: scale(.7);
			}
			a{
				color: #bd9a5e;
				padding: 0 6rpx;
			}
		}
		.btn{
			width: 620rpx;
			height: 96rpx;
			background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c4f8a74e-96c9-4540-b784-819c25288632.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5e4111;
			font-size: 32rpx;
		}
		.other_login{
			font-size: 32rpx;
			color: #795927;
			font-weight: 600;
			margin-top: 346rpx;
			text-align: center;
		}
		.icon-weixin{
			font-family: 'iconfont';
			font-size: 68rpx;
			color: #444444 !important;
			position: relative;
			margin-top: 30rpx;
			button{
				background: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/b6dd3553-bd63-4c3a-8516-f38d980f5c41.png');  /* 替换为您的图片链接 */
				width:96rpx; 
				height: 96rpx; 
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				font-size: 0;
			}
		}
	}
	.phClass{
		font-size: 28rpx;
	}
	uni-button:after{
		border: none;
	}
</style>
